<script>
  import { base, assets } from "$app/paths";
  import { onMount } from "svelte";
  let grid_row = 80;
  let grid_col = 72; //24 or 48 or 72

  let mycanvas;

  onMount(async () => {
    let ctx = mycanvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(20, 20, 150, 75);
  });
</script>

<div class="flex items-center justify-center w-full flex-col p-4">
  Product Detail
  <div class="info-box" >
    <div class="icon-tags" >
      <span class="symbol-tit order_tag"  />
    </div>
    <h1 class="name" >
      <a
        href="https://www.globalsources.com/Baby-sleepwear/baby-pajama-1183701233p.htm"
        class="underline"
      >
        Baby pajama sleepwear infant pajama toddler pajama long sleeve t-shirts
        and pants, various in colors</a
      >
    </h1>
    <div class="order-history" >
      <div class="tags history-item" >
        <span class="tag-item" >Lead Time 25–30 days</span>
        <span class="tag-item shippingCostEstimate" 
          >Shipping Notes</span
        >
      </div>
    </div>
    <div class="price-coupon-box" >
      <div class="price-info" >
        <div >
          <div class="price" >
            US$ 3.79 - 4.69
            <span class="piece" >/ 1 Piece</span>
          </div>
        </div>

        <div class="piece-tips" >
          <span class="label" >1000 Pieces</span>
          Minimum order
        </div>
      </div>
      <div class="coupon-info"  />
    </div>
    <div class="price-range" >
      <div class="item title" >
        <div class="pieces" >Quantity</div>
        <div class="num" >FOB Price</div>
      </div>
      <div class="item" >
        <div class="pieces" >1000–1999 Pieces</div>
        <div class="num" >US$ 4.69</div>
      </div>
      <div class="item" >
        <div class="pieces" >2000–2999 Pieces</div>
        <div class="num" >US$ 4.19</div>
      </div>
      <div class="item" >
        <div class="pieces" >≥3000 Pieces</div>
        <div class="num" >US$ 3.79</div>
      </div>
    </div>

    <div class="count" >
      <form class="ant-form ant-form-horizontal" >
        <div class="ant-row ant-form-item" >
          <div class="ant-col ant-form-item-control-wrapper">
            <div class="ant-form-item-control">
              <span class="ant-form-item-children"
                ><span
                  class="ant-input-affix-wrapper"
                  style="width:150px;"
                  
                  ><span class="ant-input-prefix"
                    ><div
                      class="iconfont ic_jianshao disableColor"
                      
                    /></span
                  ><input
                    placeholder=""
                    type="number"
                    value=""
                    class="ant-input"
                  /><span class="ant-input-suffix"
                    ><div
                      class="iconfont ic_zengjia"
                      
                    /></span
                  ></span
                ></span
              >
            </div>
          </div>
        </div>
      </form>
    </div>

    <div class="button-box" >
      <button
        type="button"
        class="btn ant-btn ant-btn-danger ant-btn-block"
        
        ><i class="icon iconfont ic_inquire"  /><span
          >Inquire Now</span
        ></button
      >
      <div class="btn order" >Start Order</div>
      <div class="cart" >
        <i class="iconfont ic_cart_24"  />
        <span class="text" >Add to Cart</span>
      </div>
    </div>
    <div class="Payments" >
      Payment:
      <div class="Payments-item" >
        <div class="item" >
          <img
            src="/_nuxt/img/icon_paypal.871436d.svg"
            alt=""
            class="paypal"
            
          />
        </div>
        <div class="item" >
          <img
            src="/_nuxt/img/icon-mastercard.f83161f.svg"
            alt=""
            class="master"
            
          />
        </div>
        <div class="item" >
          <img
            src="/_nuxt/img/icon_visa.b043322.svg"
            alt=""
            class="visa"
            
          />
        </div>
        <div class="item" >
          <img
            src="/_nuxt/img/icon_AmericanExpress.5932b3a.svg"
            alt=""
            class="american"
            
          />
        </div>
        <div class="item" >
          <img
            src="/_nuxt/img/icon_discover.b9867be.svg"
            alt=""
            class="discover"
            
          />
        </div>
      </div>
    </div>
  </div>
</div>
